﻿#game
{
    width: 100%;
    height: 100%;
}

/*use a smaller base size for smaller screens*/
@media (max-device-width: 480px)
{
    #game
    {
        font-size: 32px;
    }
}
/*use a bigger base size for ipad and tablets*/
@media (max-device-width: 768px)
{
    #game
    {
        font-size: 64px;
    }
}

/*smartphones landscapes*/
@media (orientation: landscape)
{
    #splash-screen, #main-menu
    {
        font-size: 1.0em;
        padding-top: 0.75em;
    }
    ul.menu li
    {
        display: inline-block;
        margin: 0;
    }
    ul.menu li button
    {
        margin: 0;
        font-size: 0.5em;
    }
}

/*small screens landscapes*/
@media (orientation: landscape) and (max-device-width: 480px)
{
    ul.menu li button
    {
        font-size: 0.4em;
    }
}

/*tablets landscape*/
@media (orientation: landscape) and (min-device-width: 768px)
{
    #splash-screen, #main-menu
    {
        padding-top: 1.5em;
    }
}